<template>
	<view class="content">
		<!-- <view class="block classify-tab-block">
			<view class="tab-content" style="flex-grow: 1;">
				<view @click="tabActive=0" :class="tabActive==0?'active':''" class="tab-item">
					热门</view>
				<view @click="tabActive=item.id" :class="tabActive==item.id?'active':''" class="tab-item"
					v-for="(item,index) in tabList" :key="item.id">{{item.jobTitle}}</view>
			</view>
			<view @click="navigate('/page_other/job_category/index?max=8&id='+tabText)" class="iconfont icon-gengduo">
			</view>
		</view> -->
		<view class="search-block">
			<input placeholder="请输入岗位名称关键字" v-model="searchName" class="search-item" @confirm="search"
				v-if="identity==1" />
			<input placeholder="请输入行业关键字" v-model="searchName" class="search-item" @confirm="search"
				v-if="identity==2" />
			<view class="iconfont icon-sousuo" style="color: #000;" @click="search"></view>
		</view>
		<view class="block label-block">
			<view class="label-content">
				<view class="label-item" @click="toOrderDate" :class="orderDate==0?'active':''">最新
					<i class="iconfont icon-icon_xialaxuanze" v-if="orderDate===1" style="font-size: 24rpx;"></i>
					<i class="iconfont icon-shangla" v-if="orderDate===2" style="font-size: 24rpx;"></i>
				</view>
				<template v-if="identity==1">
					<view class="label-item1">
						<picker class="form-ctrl" :range="type" range-key="name" :value="streetType" @change="bindType">
							{{streetType==-1? "街道" :type[streetType]['name']}}
						</picker>
						<view class="iconfont icon-icon_xialaxuanze" style="font-size: 12px;"></view>
					</view>
					<view class="label-item" @click="toOrderEducation" :class="orderEducation==0?'active':''">学历
						<i class="iconfont icon-icon_xialaxuanze" v-if="orderEducation===1"
							style="font-size: 24rpx;"></i>
						<i class="iconfont icon-shangla" v-if="orderEducation===2" style="font-size: 24rpx;"></i>
					</view>
					<view class="label-item" @click="toOrderWages" :class="orderWages==0?'active':''">薪资
						<i class="iconfont icon-icon_xialaxuanze" v-if="orderWages===1" style="font-size: 24rpx;"></i>
						<i class="iconfont icon-shangla" v-if="orderWages===2" style="font-size: 24rpx;"></i>
					</view>
				</template>

			</view>
			<view
				@click="navigate(`/page_other/job_hunting/job_screen/index?salary=${screenData.salaryId}&experience=${screenData.expId}&education=${screenData.eduId}`)"
				class="iconfont icon-shaixuan"></view>
			<view
				@click="navigate(`/page_other/job_hunting/job_screen/index?salary=${screenData.salaryId}&experience=${screenData.expId}&education=${screenData.eduId}`)"
				class="font-text">筛选</view>
		</view>
		<template v-if="identity==1">
			<view style="display: flex;justify-content: flex-end;margin-bottom: 20rpx;font-size: 26rpx; color: #999;">
				共为您找到
				<text style="color: #ff7626;">{{total}}</text> 个职位
			</view>
		</template>

		<!-- 求职者 -->
		<view class="block list-block">
			<template v-if="list.length>0">
				<template v-if="identity==1">
					<PositionItem :key="item.id" :data="item" v-for="(item) in list" style="margin-bottom: 20rpx;">
					</PositionItem>
				</template>
				<template v-if="identity==2">
					<CustomerList :key="item.id" :data="item" v-for="(item) in list" style="margin-bottom: 20rpx;">
					</CustomerList>
				</template>
			</template>
			<view v-if="list.length==total&&!more" style="text-align: center;">没有更多了哦</view>
			<view v-else style="text-align: center;">暂无数据</view>
		</view>
	</view>
</template>

<script>
	import {
		getStorage,
		setStorage
	} from '@/util/auth.js';
	import {
		getCustomerListApi,
		getPublishApi
	} from '@/api/job_hunting.js'
	import {
		getMatchingIndustry,
		getMatchingIndustryCom
	} from '@/api/config.js';
	import {
		getStreetDataApi
	} from '@/api/accept.js';

	import {
		isMore
	} from '@/util/util.js'
	import PositionItem from "@/page_other/job_hunting/recruit_list/index.vue";
	import CustomerList from "@/page_other/job_hunting/recruit_list/customer_list.vue";
	export default {
		components: {
			PositionItem,
			CustomerList
		},
		data() {
			return {
				imageUrl: '',
				recruitType: 1, //1全职 2兼职
				tabActive: 0, //顶部tab、
				tabList: [],
				tabText: '',
				orderDate: 1,
				jobLevel: 3,
				orderEducation: 0,
				orderWages: 0,
				list: [],
				page: 1,
				limit: 10,
				more: true,
				total: 0,
				screenData: {
					salaryId: 0,
					eduId: '',
					expId: 0
				},
				streetType: -1,
				type: [{
					id: -1,
					name: "全部"
				}],
				typeIndex: 0,
				searchName: ''
			}
		},
		watch: {
			tabActive: {
				handler() {
					this.refresh(true)
				}
			},
			streetType: {
				handler() {
					this.getList(true)
				}
			},
			orderDate: {
				handler() {
					this.refresh(true)
				}
			},
			orderEducation: {
				handler() {
					this.refresh(true)
				}
			},
			orderWages: {
				handler() {
					this.refresh(true)
				}
			}
		},
		methods: {
			search() {
				this.more = true
				this.getList(true)
			},
			bindType(e) {
				this.more = true
				this.streetType = e.detail.value
			},
			toOrderDate() {
				if (this.$store.getters.identity == 1) {
					this.orderDate = this.orderDate === 1 ? 2 : 1;
					this.orderEducation = 0
					this.orderWages = 0
				}

			},
			toOrderEducation() {
				this.orderEducation = this.orderEducation === 1 ? 2 : 1;
				this.orderDate = 0
				this.orderWages = 0
			},
			toOrderWages() {
				this.orderWages = this.orderWages === 1 ? 2 : 1;
				this.orderEducation = 0
				this.orderDate = 0
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			refresh() {
				this.page = 1
				this.more = true
				this.getList(true);
			},
			async getTabList() {
				let list = getStorage('tabList');
				if (!list) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					list = this.$store.getters.identity == 1 ? await getMatchingIndustry({}) :
						await getMatchingIndustryCom({});
					list.unshift();

				}
				this.tabList = list

				this.tabText = list.map((item) => {
					return item.id
				}).join(',')

				setStorage('tabList', list);
			},
			async getList(refresh = false) {

				var latitude = uni.getStorageSync('latitude');
				var longitude = uni.getStorageSync('longitude');

				let streetId = 0;
				if (this.streetType >= 0) {
					streetId = this.type[this.streetType].id
				}

				if (this.more) {
					let config = {
						page: this.page,
						limit: this.limit,
						recruitType: this.recruitType,
						jobType: this.tabActive, //职位主分类
						jobLevel: this.jobLevel,
						orderDate: this.orderDate,
						orderEducation: this.orderEducation,
						orderWages: this.orderWages,
						streetId: streetId,
						longitude: longitude,
						latitude: latitude,
						...this.screenData,
						searchName: this.searchName
					}
					uni.showLoading({
						title: '加载中',
						mask: true
					})

					let res = this.$store.getters.identity == 1 ? await getPublishApi(config) :
						await getCustomerListApi(config);
					let list = res.list ?? [];
					this.list = refresh ? list : [...this.list, ...list],
						this.total = res.count
					this.more = isMore(this.page, this.limit, this.total)
				}
			},
			//查询街道列表
			getStreetData(typeId) {
				getStreetDataApi().then((res) => {

					for (let i = 0; i < res.length; i++) {
						const current = res[i];
						this.type.push({
							id: current.id,
							name: current.name
						})
					}
					if (typeId) {
						this.type.forEach((item, index) => {
							if (item.id == typeId) {
								this.streetType = index;
								return;
							}
						})
					}

				}).catch((res) => {
					console.log(res)
				})
			},
		},

		async onLoad(options) {
			if (options.jobType) {
				this.tabActive = options.jobType
			}
			if (options.jobLevel) {
				this.jobLevel = options.jobLevel
			}
			var streetId = '';
			if (options.id) {
				streetId = options.id;
			}
			if (options.searchName) {
				this.searchName = options.searchName
			}
			await this.getStreetData(streetId);
			this.recruitType = options.type ?? 1;
			this.imageUrl = this.globalConfig.imageUrl;
			await this.getTabList();
			uni.setNavigationBarTitle({
				title: options.name
			})
			uni.$on('getJobCategory', (e) => {
				this.tabList = [];
				e.forEach((item, index) => {
					this.tabList.push({
						id: item.id,
						jobTitle: item.jobTitle
					});
				})
				this.tabText = this.tabList.map((item) => {
					return item.id
				}).join(',')
				setStorage('tabList', this.tabList)
				this.tabActive = 0;
				this.refresh()
				//this.streetId = options.id
			})
			uni.$on('getRecruiterCondition', (e) => {
				this.screenData.salaryId = e.salary;
				this.screenData.expId = e.experience;
				this.screenData.eduId = e.education;
				this.screenData.jobTypes = e.industry != 0 ? e.industry : '';
				this.screenData.scaleId = e.people;
				this.screenData.natureId = e.enterprise;
				this.refresh()
			})
			if (!options.id) {
				this.getList(true)
			}
			//this.getList(true)

		},
		onUnload() {
			uni.$off('getJobCategory')
			uni.$off('getRecruiterCondition')
		},
		computed: {
			identity() {
				return this.$store.getters.identity
			}
		},
		onPullDownRefresh() {
			this.refresh();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (this.more) {
				this.page++;
				this.getList()
			}
		},
	}
</script>

<style lang="scss">
	$box-shadow: 0 0 10px 0 #efefef;

	page {
		background: #FAFAFA;
	}

	.content {
		width: 100%;
		padding: 30rpx;

		.loadingicon {
			width: 100%;
			height: 80rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
		}

		.loading {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			align-items: center;
			justify-content: center;
			position: relative;
			text-align: center;
		}

		.loading .line {
			position: absolute;
			width: 450rpx;
			left: 150rpx;
			top: 50rpx;
			height: 1px;
			border-top: 1px solid #eee;
		}

		.loading .text {
			position: relative;
			display: inline-block;
			padding: 0 20rpx;
			background: #fff;
			z-index: 2;
			color: #777;
		}

		.loadingicon .loading {
			animation: load linear 1s infinite;
			font-size: 45rpx;
			color: #000;
		}

		.loadingicon {
			width: 100%;
			height: 80rpx;
		}

		.block {
			width: 100%;
			margin-bottom: 20rpx;
			position: relative;

			// .search {
			// 	width: 100%;
			// 	height: 70rpx;
			// 	padding: 0 20rpx;
			// 	font-size: 28rpx;
			// 	background: #F3F3F3;
			// 	border-radius: 50rpx;
			// }

			// .iconfont.icon-sousuo {
			// 	position: absolute;
			// 	transform: translate(0, -50%);
			// 	right: 10rpx;
			// 	top: 50%;
			// 	font-size: 42rpx;
			// 	font-weight: bold;
			// 	color: #999;
			// }
		}

		.block.classify-tab-block {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			.tab-content {
				display: flex;
				flex-direction: row;
				justify-content: left;
				overflow-x: scroll;

				.tab-item {
					padding: 10rpx 15rpx;
					font-weight: bold;
					font-size: 30rpx;
					margin-right: 20rpx;
					flex: none;
				}

				.tab-item.active {
					background: url("https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/job_hunting/home/tab_selected_bg.png") no-repeat right bottom;
					background-size: 70%;
				}
			}

			.iconfont {
				font-size: 32rpx;
				font-weight: bold;
				color: #000;
			}
		}

		.search-block {
			border: 1px solid #999;
			color: #999;
			font-size: 28rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 20rpx;
			border-radius: 40rpx;
			height: 70rpx;
			margin-bottom: 30rpx;
			margin-top: 20rpx;

			.iconfont {
				flex-grow: 0;
				font-size: 38rpx;
				font-weight: bold;
				margin-right: 20rpx;
				color: #F4F5F7;
			}

			input {
				flex-grow: 1;
			}
		}

		.block.label-block {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: left;
			align-items: center;

			.label-content {
				width: calc(100% - 110rpx);
				display: flex;
				flex-direction: row;
				justify-content: left;
				align-items: center;

				.label-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 10rpx 25rpx;
					font-size: 28rpx;
					color: #FE7526;
					background: #FDECE5;
					margin-right: 20rpx;

				}

				.label-item1 {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 10rpx 10rpx;
					font-size: 28rpx;
					color: #FE7526;
					background: #FDECE5;
					margin-right: 20rpx;

					.form-ctrl {
						width: 80rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

				}

				.label-item.active {
					color: #999;
					background: #F3F3F3;
				}

			}

			.font-text {
				font-size: 28rpx;
			}

			.iconfont {
				font-size: 38rpx;
				font-weight: bold;
				margin-right: 10rpx;
			}
		}

		.block.list-block {
			box-shadow: none;
			display: flex;
			flex-direction: column;
			margin-bottom: 0;

			.list-item {
				width: 100%;
				background: #fff;
				border-radius: 10rpx;
				box-shadow: $box-shadow;
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-bottom: 20rpx;

				.list-info {
					//width: calc(100% - 180rpx);
					width: 100%;
					display: flex;
					flex-direction: column;

					>view {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.title {
						color: #000;
						font-weight: bold;
						font-size: 34rpx;
					}

					.address-item {
						display: flex;
						justify-content: space-between;

						.address {
							width: 440rpx;
							color: #999;
							font-size: 26rpx;
							margin-top: 20rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.distance {
							color: #999;
							font-size: 26rpx;
							margin-top: 20rpx;
						}
					}


					.label-block {
						font-size: 24rpx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: left;
						margin-top: 20rpx;

						.label-item {
							padding: 8rpx 20rpx;
							background: #F5F6F8;
							color: #999;
							margin: 0 10rpx 20rpx 0;
						}
					}

					.detail-item {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.money-item {
							margin-top: 20rpx;

							.wage {
								color: #FE7526;
								font-size: 36rpx;
								font-weight: bold;

								.unit {
									font-size: 28rpx;
									font-weight: normal;
								}
							}
						}

						.detail-info {
							width: 180rpx;
							//height: 200rpx;
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							justify-content: center;
							align-items: center;

							.name {
								width: 110rpx;
								font-size: 24rpx;
								color: #999;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								text-align: center;
								text-indent: 15rpx;
							}

							.photo {
								width: 70rpx;
								height: 70rpx;
								border-radius: 100%;
								background: #efefef;
							}

							.apply-btn {
								border: 1px solid #FE7526;
								border-radius: 8rpx;
								color: #FE7526;
								font-size: 24rpx;
								padding: 8rpx 28rpx;
								position: relative;
								left: 30rpx;
							}
						}
					}

				}
			}

			.list-item:last-child {
				margin-bottom: 0;
			}

			.person-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 0 30rpx;
				margin-bottom: 30rpx;

				.info-block,
				.job-block {
					width: 100%;
					padding: 20rpx 0;
				}

				.info-block {
					border-bottom: 1px solid #efefef;
					display: flex;
					flex-direction: row;
					align-items: center;

					.user-photo {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}

					.info {
						width: calc(100% - 120rpx);
						margin-left: 20rpx;

						.name {
							font-weight: bold;
							font-size: 34rpx;
						}

						.others {
							display: flex;
							flex-direction: row;

							.other-item {
								font-size: 26rpx;
								color: #999;
								margin-top: 14rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}

				.job-block {
					display: flex;
					flex-direction: row;
					align-items: center;

					.job {
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.label-block {
							width: 100%;
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;

							.label-item {
								background: #F4F5F7;
								color: #999;
								font-size: 24rpx;
								padding: 4rpx 10rpx;
								margin-right: 20rpx;
								margin-bottom: 20rpx;
							}
						}

						.job-content {
							width: 100%;
							font-size: 26rpx;
						}
					}

					.btn-block {
						width: 140rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.btn {
							padding: 6rpx 26rpx;
							border: 1px solid #FE7526;
							border-radius: 6rpx;
							color: #FE7526;
							font-size: 24rpx;
						}
					}
				}
			}

			.person-item:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>